<template>
	<view class="search">
		<!-- 搜索 -->
		<view class="top">
			<view class="dir-left-nowrap box">
				<input type="text" class="box-grow-1 input" confirm-type="搜索" @confirm="search" v-model="serachText"
					placeholder="搜朋友的珠宝店">
				<view class="close-tip" @click="clear">
					<image class="search-close" v-if="serachText" src="/static/image/icon/delete-yuan.png"></image>
				</view>
				<view class="box-grow-0 cross-center" @click="search">搜索</view>
			</view>
		</view>
		<!-- 历史记录 -->
		<view class="all-history" v-if="!isSearch">
			<view class="history" v-if="historyText.length >0">
				<view class="dir-left-nowrap cross-center title">
					<view class="box-grow-1">历史搜索</view>
					<image src="../../static/image/icon/delete.png" class="box-grow-0" @click="cleanhistory">
					</image>
				</view>
				<view class="dir-left-wrap list">
					<view class="dir-left-wrap cross-center">
						<view v-for="(item,index) in historyText" :key="index" class="dir-left-wrap box-grow-0"
							@click="hisrecord(item)">
							<view class="box-grow-0 cross-center item">
								<view class="t-omit" style="max-width: 650rpx">{{item}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-if="historyText.length == 0">
				<view class="main-center no-result">
					<view class="dir-left-nowrap cross-center">
						<view class="box-grow-1">
							<view>暂无搜索历史</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="allstore" v-else>
			<view class="beturnstore" v-if="list.length > 0" v-for="(item,index) in list" :key="index"
				@click="jumptostore(item)">
				<view class="beturnimage">
					<image class="image" :src="item.user.userInfo.avatar"></image>
				</view>
				<view class="beturntext">
					{{item.name}}的珠宝店
				</view>
			</view>
			<view class="" v-if="list.length == 0">
				<view class="main-center no-result">
					<view class="dir-left-nowrap cross-center">
						<view class="box-grow-1">
							<view>暂无相关内容</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				serachText: '',
				historyText: [],
				list: [],
				isSearch: false,
				page: 1,
				page_count: 1
			}
		},
		onLoad() {
			this.historyList()
		},
		onReachBottom() {
			if (this.serachText) {
				this.loading = true;
				if (this.page_count > this.page) {
					this.page++;
					this.loadList();
				} else {
					this.loading = false;
				}
			}
		},
		watch: {
			serachText: {
				handler(v) {
					if (v == '') {
						this.clear();
					}
				},
				immediate: true,
			}
		},
		methods: {
			historyList() {
				let history = this.$storage.getStorageSync('SEARCH_HISTORY_STORELIST')
				if (history) {
					this.historyText = history
				}
			},
			clear() {
				uni.hideKeyboard()
				this.serachText = '';
				this.loading = false;
				this.isSearch = false
			},
			hisrecord(keyword) {
				this.serachText = keyword
				this.search()
			},
			jumptostore(item) {
				uni.navigateTo({
					url: '/pages/store/mine/mine?vid=' + item.id
				})
			},
			search() {
				if (this.serachText == '') {
					uni.showToast({
						title: '请输入搜索内容',
						icon: 'none'
					})
					return;
				}
				this.loadList()
				this.isSearch = true
				if (this.historyText.length > 0) {
					// 判断历史记录里是否存在此条数据
					let isexist = this.historyText.some((item) => {
						return item == this.serachText
					})
					// 不存在
					if (!isexist) {
						if (this.historyText.length < 20) {
							this.historyText.unshift(this.serachText)
						} else {
							this.historyText.unshift(this.serachText)
							this.historyText.pop()
						}
					}
				} else {
					this.historyText.push(this.serachText)
				}
				uni.setStorageSync("SEARCH_HISTORY_STORELIST", this.historyText);
			},
			loadList() {
				this.$request({
					url: this.$api.apply.list,
					data: {
						page: this.page,
						limit: 20,
						mch_id: 0,
						review_status: 1,
						keyword: this.serachText
					}
				}).then((res) => {
					this.list = res.data.list
					this.page_count = res.data.pagination.page_count
					// this.$storage.setStorageSync('searchStoreList', res.data.list)
				}).catch(err => {
					console.log(err);
				})
			},
			// 键盘输入搜索内容触发
			searchinput(e) {
				console.log(e);
			},
			// 清空搜索框
			cleaninput() {
				this.serachText = ''
			},
			// 清空历史记录
			cleanhistory() {
				let self = this;
				uni.showModal({
					content: '确认删除全部历史记录？',
					success: function(res) {
						if (res.confirm) {
							uni.removeStorageSync("SEARCH_HISTORY_STORELIST");
							self.historyText = [];
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.search {
		height: auto;
	}

	.top {
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 15;
		padding: #{20rpx} #{24rpx};
		background-color: #efeff4;
		font-size: 28rpx;
		color: $uni-general-color-one;

		.input {
			background-color: #ffffff;
			border-radius: #{50rpx 0 0 50rpx};
			padding: 0 #{32rpx};
			font-size: $uni-font-size-general-one;
			height: #{64rpx};
		}

		.box {
			position: relative;

			.close-tip {
				width: #{64rpx};
				height: #{64rpx};
				background-color: #ffffff;
				border-radius: #{0 50rpx 50rpx 0};
				margin-right: #{20rpx};
			}

			.search-close {
				width: #{32rpx};
				height: #{32rpx};
				border-radius: 50%;
				margin: #{16rpx};
			}
		}

		.radio {
			margin-top: #{32rpx};

			.radio-item {
				padding-bottom: #{12rpx};
			}

			.active {
				border-bottom: #{4rpx} solid;
			}
		}
	}

	.all-history {
		margin-top: 100rpx;
		background-color: #fafafa;
		border-radius: 16rpx;
		height: auto;
	}

	.history {
		padding: #{36rpx} #{24rpx};
		border-radius: #{32rpx} #{32rpx} 0 0;
		background-color: #ffffff;
		font-size: $uni-font-size-general-one;

		.title {
			padding-bottom: #{24rpx};
			color: $uni-general-color-one;

			image {
				width: #{28rpx};
				height: #{34rpx};
				display: block;
			}
		}

		.list {
			.item {
				height: #{64rpx};
				background-color: #f7f7f7;
				padding: 0 #{20rpx};
				margin-right: #{20rpx};
				margin-bottom: #{16rpx};
				border-radius: #{32rpx};
			}
		}
	}

	.no-result {
		height: #{600rpx};
		padding: #{28rpx} 0;
		font-size: $uni-font-size-general-one;
		background-color: #ffffff;

		.text {
			color: $uni-general-color-two;
		}

		.empty {
			width: #{100rpx};
			height: #{100rpx};
			display: block;
			margin-right: #{40rpx};
		}
	}

	// 小店循环
	.allstore {
		padding-top: 100rpx;
	}

	.beturnstore {
		background: #FFFFFF;
		width: 686rpx;
		height: 128rpx;
		border-radius: 16rpx;
		margin: 20rpx auto 20rpx;
		color: #333333;
		display: flex;
		align-items: center;
		padding: 0 48rpx;
	}

	.beturnimage {
		width: 84rpx;
		height: 84rpx;
		border-radius: 50%;
	}

	.beturnimage .image {
		width: 84rpx;
		height: 84rpx;
		border-radius: 50%;
	}

	.beturntext {
		font-size: 28rpx;
		color: #333333;
		padding-left: 32rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>
